<template>
  <!-- 组件根元素，用于控制尺寸 -->
  <div class="cpu-gauge-chart" ref="chartContainer"></div>
</template>

<script>
// 按需引入ECharts的核心功能，减小打包体积
import * as echarts from 'echarts/core';
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

// 注册必要的ECharts组件
echarts.use([GaugeChart, CanvasRenderer]);

export default {
  name: 'CpuGaugeChart',
  // 定义组件接收的属性：cpuUsage，类型为数字，必需，且在0到100之间
  props: {
    cpuUsage: {
      type: Number,
      required: true,
      validator: (value) => value >= 0 && value <= 100
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null // 用于保存ECharts实例
    };
  },
  watch: {
    // 监听cpuUsage属性的变化，当其改变时自动更新图表
    cpuUsage(newValue) {
      this.updateChart(newValue);
    }
  },
  mounted() {
    // 在组件挂载到DOM后初始化图表
    this.initChart();
  },
  beforeUnmount() {
    // 在组件销毁前，清理ECharts实例以释放内存，避免内存泄漏
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    initChart() {
      // 获取DOM容器并初始化ECharts实例
      const chartDom = this.$refs.chartContainer;
      this.chart = echarts.init(chartDom);

      // 配置图表选项
      const option = {
        series: [{
          type: 'gauge',
          radius: '90%', // 仪表盘半径，相对于容器大小
          startAngle: 225, // 起始角度，指向左下方
          endAngle: -45,  // 结束角度，指向右下方，总共270度弧度
          min: 0,
          max: 100,
          progress: {
            show: true,
            width: 8 // 进度条宽度
          },
          axisLine: {
            lineStyle: {
              width: 8,
              // 分段颜色，从绿色到黄色再到红色
              color: [
                [0.33, '#67e0c3'], // 0-33%: 绿色
                [0.66, '#f8e896'], // 33-66%: 黄色
                [1, '#fd666f']    // 66-100%: 红色
              ]
            }
          },
          axisTick: {
            show: true // 不显示刻度线
          },
          splitLine: {
            show: true // 不显示分隔线
          },
          axisLabel: {
            show: true // 不显示刻度标签
          },
          pointer: {
            // icon: 'path://M12.8,0.4l-2.8,2.8c-0.3,0.3-0.3,0.8,0,1.1L19.8,14H4.2l9.8-9.8c0.3-0.3,0.3-0.8,0-1.1l-2.8-2.8C10.9,0.1,10.4,0.1,10.1,0.4z',
            length: '60%',
            width: 8
          },
          detail: {
            valueAnimation: true, // 开启数值动画
            formatter: '{value}%',
            color: '#fff',
            fontSize: 16,
            offsetCenter: [0, '70%'] // 居中偏下显示
          },
          title: {
            offsetCenter: [0, '90%'], // 标题位置
            color: '#ccc',
            fontSize: 12
          },
          data: [{
            value: this.cpuUsage, // 使用传入的初始值
            name: this.title
          }]
        }]
      };

      // 将配置项设置给图表实例
      this.chart.setOption(option);

      // 窗口大小改变时，自动调整图表大小
      window.addEventListener('resize', this.handleResize);
    },
    updateChart(newValue) {
      // 更新图表数据，使用平滑过渡动画
      if (this.chart) {
        this.chart.setOption({
          series: [{
            data: [{
              value: newValue,
              name: this.title
            }]
          }]
        });
      }
    },
    handleResize() {
      // 处理窗口 resize 事件，调整图表大小
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>

<style scoped>
.cpu-gauge-chart {
  width: 100%;
  height: 100%;
  min-width: 200px;
  min-height: 200px;
}
</style>